import React, { useEffect, useState } from 'react'
import { Box, AutoRollComponent } from '$components';
import './style.less';
import { communtity_data } from '../constants/index'

function DataTop5({ communtityInfo }) {
    const content = <div className='rank_content_overflow'>
        {communtityInfo?.communityPersons
            ?.filter(x => !!x.person_community)
            ?.sort((a, b) => b.count - a.count)
            ?.map(s => {
                return <div className='_rank_content'>
                    <div className='_rank_item2'>{s?.person_community}</div>
                    <div className='_rank_item3'>{parseInt(s?.count)}</div>
                </div>
            })}
    </div>


    return <Box title={"租户来源统计"} bodyPaddingTop={1} >
        <div className='_traffic_ranking'>
            <div className='_rank_title'>
                <div className='_rank_item2'>社区名称</div>
                <div className='_rank_item3'>人数 / <span style={{ fontSize: 14 }}>人</span></div>
            </div>

            <AutoRollComponent canScroll={true} content={content} data={[]} divHeight={200} divId={`community-right-bottom`} />
        </div>
    </Box>
}

export default DataTop5;


